<template>
  <!-- 排行榜详情 -->
  <div class="ranking_list_detail">
    <div class="pic">
      <img
        :src="topListDetail.coverImgUrl"
        alt=""
        class="pic_url"
        @click="rankingListPicClick"
      />
    </div>
    <div class="detail">
      <div class="name">{{ topListDetail.name + '  ' }}</div>
      <div class="update"> {{ topListDetail.updateFrequency }}</div>
      <div class="more">
        <span class="play" @click="addAllSongToMusicList"> 播放</span>
        <span class="collection"> ({{ topListDetail.subscribedCount }})</span>
        <span class="play_count"> ({{ topListDetail.playCount }})</span>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, inject } from "vue";
export default defineComponent({
  name: "RankingListDetail",
  setup(props, context) {
    // 获取第一个榜单的详情
    let topListDetail = inject("topListDetail");

    // 点击榜单进入榜单详情
    let rankingListPicClick = () => {
      context.emit("rankingListPicClick");
    };

    // 点击歌单的播放按钮的回调
    let addAllSongToMusicList = () => {
      context.emit("addAllSongToMusicList");
    };

    return {
      topListDetail,
      rankingListPicClick,
      addAllSongToMusicList,
    };
  },
});
</script>
<style scoped>
.ranking_list_detail {
  width: 100%;
  display: flex;
  align-items: center;
}
.pic {
  width: 180px;
  height: 180px;
  border: 3px solid #ccc;
}
.pic_url {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.detail {
  flex: 1;
  padding-left: 20px;
}
.name {
  font-size: 24px;
  color: #222;
  font-weight: 600;
  margin-bottom: 10px;
  cursor: pointer;
}
.update {
  color: #888;
  font-size: 16px;
}
.more {
  margin-top: 25px;
}
.more span {
  padding: 10px 15px;
  font-size: 18px;
  border-radius: 4px;
  margin: 0 10px;
}
.play {
  color: #fff;
  background-color: #c20c0c;
  cursor: pointer;
}
.collection {
  color: #fff;
  background-color: #2172c1;
}
.play_count {
  color: #fff;
  background-color: orangered;
}
</style>
